<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1481498" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">电脑</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">主页</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">人员</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">电脑</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">主页</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe705;</span>
                <div class="name">现实演示</div>
                <div class="code-name">&amp;#xe705;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea35;</span>
                <div class="name">plus </div>
                <div class="code-name">&amp;#xea35;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">log-out</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">日历</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb9b;</span>
                <div class="name">plus</div>
                <div class="code-name">&amp;#xeb9b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b5;</span>
                <div class="name">幻灯演示</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">主页</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d2;</span>
                <div class="name">主页</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">客户支持服务</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">电脑</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b6;</span>
                <div class="name">好房拓 4.0.0 报备客户</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">生产报备</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">日历</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">logout</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b1;</span>
                <div class="name">version</div>
                <div class="code-name">&amp;#xe7b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">服务器</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">概览</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">电脑</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">面板编辑</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69d;</span>
                <div class="name">面板编辑</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">服务器</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">日历</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f2;</span>
                <div class="name">电脑</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">服务器</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">服务器</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">考勤报备</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">计算机</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe688;</span>
                <div class="name">人员</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">时钟</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">面板开通</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea0a;</span>
                <div class="name">GitHub</div>
                <div class="code-name">&amp;#xea0a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">锁头</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">面板</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a4;</span>
                <div class="name">日历</div>
                <div class="code-name">&amp;#xe7a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">交互演示动画</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">version</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe715;</span>
                <div class="name">概览</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">时钟</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">时钟</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">人员</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">version</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">时钟</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b1;</span>
                <div class="name">时钟</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe726;</span>
                <div class="name">服务器</div>
                <div class="code-name">&amp;#xe726;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b0;</span>
                <div class="name">设置 copy 2</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe725;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe725;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ca;</span>
                <div class="name">日历</div>
                <div class="code-name">&amp;#xe8ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf081;</span>
                <div class="name">plus</div>
                <div class="code-name">&amp;#xf081;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf1b4;</span>
                <div class="name">github</div>
                <div class="code-name">&amp;#xf1b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">文档</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">购物车-23</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">购物车-23</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe709;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe709;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">演示汇报</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb9c;</span>
                <div class="name">version</div>
                <div class="code-name">&amp;#xeb9c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cb;</span>
                <div class="name">version</div>
                <div class="code-name">&amp;#xe6cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">人员 (1)</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">服务支持</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">人员</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">搜索--1</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">服务器</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">english</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">Version Changed</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">支持</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ae;</span>
                <div class="name">面板表格</div>
                <div class="code-name">&amp;#xe8ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6be;</span>
                <div class="name">log-out</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">设 置</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe724;</span>
                <div class="name">version</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">任务 (1)</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">时钟</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">演示</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">tags</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">icon_horn</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">icon_dmail</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">icon_message</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">icon_im_more</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">icon_subordinate</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">Field-number</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">delete</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">icon_English</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">tips</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">segi-icon-tips</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">tips (1)</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">TIPS (2)</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">exchange</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">exchange (1)</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">exchange (2)</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">exchange-cny-line</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">excel</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">Excel 办公软件 表格</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">word</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">word (1)</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">图表-表格</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">图表 下降趋势</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">图表 多维柱状图</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">图表 (1)</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">图表 (2)</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">图表 走势图</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">图表-函数</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">组织</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">组织管理</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">组织群体</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">支持中心</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d9;</span>
                <div class="name">ICP备案服务</div>
                <div class="code-name">&amp;#xe7d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe690;</span>
                <div class="name">version</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d7;</span>
                <div class="name">version</div>
                <div class="code-name">&amp;#xe6d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">version icon</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe85f;</span>
                <div class="name">logout-1</div>
                <div class="code-name">&amp;#xe85f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bb;</span>
                <div class="name">k8s-namespace</div>
                <div class="code-name">&amp;#xe7bb;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont iconshezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.iconshezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondiannao"></span>
            <div class="name">
              电脑
            </div>
            <div class="code-name">.icondiannao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzhuye"></span>
            <div class="name">
              主页
            </div>
            <div class="code-name">.iconzhuye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconperson"></span>
            <div class="name">
              人员
            </div>
            <div class="code-name">.iconperson
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondiannao1"></span>
            <div class="name">
              电脑
            </div>
            <div class="code-name">.icondiannao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzhuye1"></span>
            <div class="name">
              主页
            </div>
            <div class="code-name">.iconzhuye1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxianshiyanshi"></span>
            <div class="name">
              现实演示
            </div>
            <div class="code-name">.iconxianshiyanshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconplus"></span>
            <div class="name">
              plus 
            </div>
            <div class="code-name">.iconplus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlogout"></span>
            <div class="name">
              log-out
            </div>
            <div class="code-name">.iconlogout
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconrili"></span>
            <div class="name">
              日历
            </div>
            <div class="code-name">.iconrili
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconplus1"></span>
            <div class="name">
              plus
            </div>
            <div class="code-name">.iconplus1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon28"></span>
            <div class="name">
              幻灯演示
            </div>
            <div class="code-name">.icon28
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzhuye2"></span>
            <div class="name">
              主页
            </div>
            <div class="code-name">.iconzhuye2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzhuye3"></span>
            <div class="name">
              主页
            </div>
            <div class="code-name">.iconzhuye3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconphone"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.iconphone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.iconsousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon"></span>
            <div class="name">
              客户支持服务
            </div>
            <div class="code-name">.iconicon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondiannao2"></span>
            <div class="name">
              电脑
            </div>
            <div class="code-name">.icondiannao2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhaofangtuo400baobeikehu"></span>
            <div class="name">
              好房拓 4.0.0 报备客户
            </div>
            <div class="code-name">.iconhaofangtuo400baobeikehu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsousuo-copy"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.iconsousuo-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshengchanbaobei"></span>
            <div class="name">
              生产报备
            </div>
            <div class="code-name">.iconshengchanbaobei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconrili1"></span>
            <div class="name">
              日历
            </div>
            <div class="code-name">.iconrili1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsearch"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.iconsearch
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshezhi1"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.iconshezhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlogout1"></span>
            <div class="name">
              logout
            </div>
            <div class="code-name">.iconlogout1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconversion"></span>
            <div class="name">
              version
            </div>
            <div class="code-name">.iconversion
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfuwuqi"></span>
            <div class="name">
              服务器
            </div>
            <div class="code-name">.iconfuwuqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconoverview"></span>
            <div class="name">
              概览
            </div>
            <div class="code-name">.iconoverview
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondashboard"></span>
            <div class="name">
              电脑
            </div>
            <div class="code-name">.icondashboard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmianbanbianji"></span>
            <div class="name">
              面板编辑
            </div>
            <div class="code-name">.iconmianbanbianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmianbanbianji1"></span>
            <div class="name">
              面板编辑
            </div>
            <div class="code-name">.iconmianbanbianji1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfuwuqi1"></span>
            <div class="name">
              服务器
            </div>
            <div class="code-name">.iconfuwuqi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsousuo1"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.iconsousuo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconrili2"></span>
            <div class="name">
              日历
            </div>
            <div class="code-name">.iconrili2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcomputer"></span>
            <div class="name">
              电脑
            </div>
            <div class="code-name">.iconcomputer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfuwuqi2"></span>
            <div class="name">
              服务器
            </div>
            <div class="code-name">.iconfuwuqi2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon-test"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.iconicon-test
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfuwuqi3"></span>
            <div class="name">
              服务器
            </div>
            <div class="code-name">.iconfuwuqi3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconkaoqinbaobei"></span>
            <div class="name">
              考勤报备
            </div>
            <div class="code-name">.iconkaoqinbaobei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcomputer1"></span>
            <div class="name">
              计算机
            </div>
            <div class="code-name">.iconcomputer1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyewuyuanyeji-"></span>
            <div class="name">
              人员
            </div>
            <div class="code-name">.iconyewuyuanyeji-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshizhong"></span>
            <div class="name">
              时钟
            </div>
            <div class="code-name">.iconshizhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmianbankaitong"></span>
            <div class="name">
              面板开通
            </div>
            <div class="code-name">.iconmianbankaitong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconGitHub"></span>
            <div class="name">
              GitHub
            </div>
            <div class="code-name">.iconGitHub
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon-"></span>
            <div class="name">
              锁头
            </div>
            <div class="code-name">.iconicon-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmianban"></span>
            <div class="name">
              面板
            </div>
            <div class="code-name">.iconmianban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconrili3"></span>
            <div class="name">
              日历
            </div>
            <div class="code-name">.iconrili3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconphone1"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.iconphone1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjiaohuyanshidonghua"></span>
            <div class="name">
              交互演示动画
            </div>
            <div class="code-name">.iconjiaohuyanshidonghua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconversion1"></span>
            <div class="name">
              version
            </div>
            <div class="code-name">.iconversion1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icongailan"></span>
            <div class="name">
              概览
            </div>
            <div class="code-name">.icongailan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsousuo2"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.iconsousuo2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshizhong1"></span>
            <div class="name">
              时钟
            </div>
            <div class="code-name">.iconshizhong1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshizhong2"></span>
            <div class="name">
              时钟
            </div>
            <div class="code-name">.iconshizhong2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconrenyuan"></span>
            <div class="name">
              人员
            </div>
            <div class="code-name">.iconrenyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconversion2"></span>
            <div class="name">
              version
            </div>
            <div class="code-name">.iconversion2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshizhong3"></span>
            <div class="name">
              时钟
            </div>
            <div class="code-name">.iconshizhong3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshizhong4"></span>
            <div class="name">
              时钟
            </div>
            <div class="code-name">.iconshizhong4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfuwuqi4"></span>
            <div class="name">
              服务器
            </div>
            <div class="code-name">.iconfuwuqi4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshezhicopy"></span>
            <div class="name">
              设置 copy 2
            </div>
            <div class="code-name">.iconshezhicopy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconphone2"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.iconphone2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconrili4"></span>
            <div class="name">
              日历
            </div>
            <div class="code-name">.iconrili4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconplus2"></span>
            <div class="name">
              plus
            </div>
            <div class="code-name">.iconplus2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icongithub"></span>
            <div class="name">
              github
            </div>
            <div class="code-name">.icongithub
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconwendang"></span>
            <div class="name">
              文档
            </div>
            <div class="code-name">.iconwendang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconqicheqianlian-1-copy"></span>
            <div class="name">
              购物车-23
            </div>
            <div class="code-name">.iconqicheqianlian-1-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconqicheqianlian-1-copy1"></span>
            <div class="name">
              购物车-23
            </div>
            <div class="code-name">.iconqicheqianlian-1-copy1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsousuo3"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.iconsousuo3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyanshihuiyi"></span>
            <div class="name">
              演示汇报
            </div>
            <div class="code-name">.iconyanshihuiyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconphone3"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.iconphone3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconversion3"></span>
            <div class="name">
              version
            </div>
            <div class="code-name">.iconversion3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconversion4"></span>
            <div class="name">
              version
            </div>
            <div class="code-name">.iconversion4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconrenyuan1"></span>
            <div class="name">
              人员 (1)
            </div>
            <div class="code-name">.iconrenyuan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjishuzhichizhichizhinengzhinengfuwufuwuke"></span>
            <div class="name">
              服务支持
            </div>
            <div class="code-name">.iconjishuzhichizhichizhinengzhinengfuwufuwuke
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconrenyuan2"></span>
            <div class="name">
              人员
            </div>
            <div class="code-name">.iconrenyuan2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsoushuo"></span>
            <div class="name">
              搜索--1
            </div>
            <div class="code-name">.iconsoushuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfuwuqi5"></span>
            <div class="name">
              服务器
            </div>
            <div class="code-name">.iconfuwuqi5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconenglish"></span>
            <div class="name">
              english
            </div>
            <div class="code-name">.iconenglish
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconiconmanagement-"></span>
            <div class="name">
              Version Changed
            </div>
            <div class="code-name">.iconiconmanagement-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsousuo4"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.iconsousuo4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconSUPPORT"></span>
            <div class="name">
              支持
            </div>
            <div class="code-name">.iconSUPPORT
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconmianbanbiaoge"></span>
            <div class="name">
              面板表格
            </div>
            <div class="code-name">.iconmianbanbiaoge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlog-out"></span>
            <div class="name">
              log-out
            </div>
            <div class="code-name">.iconlog-out
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshezhi3"></span>
            <div class="name">
              设 置
            </div>
            <div class="code-name">.iconshezhi3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconversion5"></span>
            <div class="name">
              version
            </div>
            <div class="code-name">.iconversion5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconrenwu"></span>
            <div class="name">
              任务 (1)
            </div>
            <div class="code-name">.iconrenwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshizhong5"></span>
            <div class="name">
              时钟
            </div>
            <div class="code-name">.iconshizhong5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshow"></span>
            <div class="name">
              演示
            </div>
            <div class="code-name">.iconshow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontags"></span>
            <div class="name">
              tags
            </div>
            <div class="code-name">.icontags
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_horn"></span>
            <div class="name">
              icon_horn
            </div>
            <div class="code-name">.iconicon_horn
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_dmail"></span>
            <div class="name">
              icon_dmail
            </div>
            <div class="code-name">.iconicon_dmail
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_message"></span>
            <div class="name">
              icon_message
            </div>
            <div class="code-name">.iconicon_message
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_im_more"></span>
            <div class="name">
              icon_im_more
            </div>
            <div class="code-name">.iconicon_im_more
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_subordinate"></span>
            <div class="name">
              icon_subordinate
            </div>
            <div class="code-name">.iconicon_subordinate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconField-number"></span>
            <div class="name">
              Field-number
            </div>
            <div class="code-name">.iconField-number
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondelete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.icondelete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_English"></span>
            <div class="name">
              icon_English
            </div>
            <div class="code-name">.iconicon_English
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontips"></span>
            <div class="name">
              tips
            </div>
            <div class="code-name">.icontips
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsegi-icon-tips"></span>
            <div class="name">
              segi-icon-tips
            </div>
            <div class="code-name">.iconsegi-icon-tips
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontips1"></span>
            <div class="name">
              tips (1)
            </div>
            <div class="code-name">.icontips1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconTIPS"></span>
            <div class="name">
              TIPS (2)
            </div>
            <div class="code-name">.iconTIPS
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconexchange"></span>
            <div class="name">
              exchange
            </div>
            <div class="code-name">.iconexchange
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconexchange1"></span>
            <div class="name">
              exchange (1)
            </div>
            <div class="code-name">.iconexchange1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconexchange2"></span>
            <div class="name">
              exchange (2)
            </div>
            <div class="code-name">.iconexchange2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconexchange-cny-line"></span>
            <div class="name">
              exchange-cny-line
            </div>
            <div class="code-name">.iconexchange-cny-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconexcel"></span>
            <div class="name">
              excel
            </div>
            <div class="code-name">.iconexcel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconExcelbangongruanjianbiaoge"></span>
            <div class="name">
              Excel 办公软件 表格
            </div>
            <div class="code-name">.iconExcelbangongruanjianbiaoge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconword"></span>
            <div class="name">
              word
            </div>
            <div class="code-name">.iconword
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconword1"></span>
            <div class="name">
              word (1)
            </div>
            <div class="code-name">.iconword1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontubiao-biaoge"></span>
            <div class="name">
              图表-表格
            </div>
            <div class="code-name">.icontubiao-biaoge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontubiaoxiajiangqushi"></span>
            <div class="name">
              图表 下降趋势
            </div>
            <div class="code-name">.icontubiaoxiajiangqushi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontubiaoduoweizhuzhuangtu"></span>
            <div class="name">
              图表 多维柱状图
            </div>
            <div class="code-name">.icontubiaoduoweizhuzhuangtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontubiao"></span>
            <div class="name">
              图表 (1)
            </div>
            <div class="code-name">.icontubiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontubiao1"></span>
            <div class="name">
              图表 (2)
            </div>
            <div class="code-name">.icontubiao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontubiaozoushitu"></span>
            <div class="name">
              图表 走势图
            </div>
            <div class="code-name">.icontubiaozoushitu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontubiao-hanshu"></span>
            <div class="name">
              图表-函数
            </div>
            <div class="code-name">.icontubiao-hanshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzuzhi"></span>
            <div class="name">
              组织
            </div>
            <div class="code-name">.iconzuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzuzhiguanli"></span>
            <div class="name">
              组织管理
            </div>
            <div class="code-name">.iconzuzhiguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzuzhiqunti"></span>
            <div class="name">
              组织群体
            </div>
            <div class="code-name">.iconzuzhiqunti
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzhichizhongxin"></span>
            <div class="name">
              支持中心
            </div>
            <div class="code-name">.iconzhichizhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconICPbeianfuwu"></span>
            <div class="name">
              ICP备案服务
            </div>
            <div class="code-name">.iconICPbeianfuwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconversion6"></span>
            <div class="name">
              version
            </div>
            <div class="code-name">.iconversion6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconversion7"></span>
            <div class="name">
              version
            </div>
            <div class="code-name">.iconversion7
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconversionicon"></span>
            <div class="name">
              version icon
            </div>
            <div class="code-name">.iconversionicon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconlogout-"></span>
            <div class="name">
              logout-1
            </div>
            <div class="code-name">.iconlogout-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconks-namespace"></span>
            <div class="name">
              k8s-namespace
            </div>
            <div class="code-name">.iconks-namespace
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#iconshezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondiannao"></use>
                </svg>
                <div class="name">电脑</div>
                <div class="code-name">#icondiannao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzhuye"></use>
                </svg>
                <div class="name">主页</div>
                <div class="code-name">#iconzhuye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconperson"></use>
                </svg>
                <div class="name">人员</div>
                <div class="code-name">#iconperson</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondiannao1"></use>
                </svg>
                <div class="name">电脑</div>
                <div class="code-name">#icondiannao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzhuye1"></use>
                </svg>
                <div class="name">主页</div>
                <div class="code-name">#iconzhuye1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxianshiyanshi"></use>
                </svg>
                <div class="name">现实演示</div>
                <div class="code-name">#iconxianshiyanshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconplus"></use>
                </svg>
                <div class="name">plus </div>
                <div class="code-name">#iconplus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlogout"></use>
                </svg>
                <div class="name">log-out</div>
                <div class="code-name">#iconlogout</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconrili"></use>
                </svg>
                <div class="name">日历</div>
                <div class="code-name">#iconrili</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconplus1"></use>
                </svg>
                <div class="name">plus</div>
                <div class="code-name">#iconplus1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon28"></use>
                </svg>
                <div class="name">幻灯演示</div>
                <div class="code-name">#icon28</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzhuye2"></use>
                </svg>
                <div class="name">主页</div>
                <div class="code-name">#iconzhuye2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzhuye3"></use>
                </svg>
                <div class="name">主页</div>
                <div class="code-name">#iconzhuye3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconphone"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#iconphone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#iconsousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon"></use>
                </svg>
                <div class="name">客户支持服务</div>
                <div class="code-name">#iconicon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondiannao2"></use>
                </svg>
                <div class="name">电脑</div>
                <div class="code-name">#icondiannao2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhaofangtuo400baobeikehu"></use>
                </svg>
                <div class="name">好房拓 4.0.0 报备客户</div>
                <div class="code-name">#iconhaofangtuo400baobeikehu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsousuo-copy"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#iconsousuo-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshengchanbaobei"></use>
                </svg>
                <div class="name">生产报备</div>
                <div class="code-name">#iconshengchanbaobei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconrili1"></use>
                </svg>
                <div class="name">日历</div>
                <div class="code-name">#iconrili1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsearch"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#iconsearch</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshezhi1"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#iconshezhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlogout1"></use>
                </svg>
                <div class="name">logout</div>
                <div class="code-name">#iconlogout1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconversion"></use>
                </svg>
                <div class="name">version</div>
                <div class="code-name">#iconversion</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfuwuqi"></use>
                </svg>
                <div class="name">服务器</div>
                <div class="code-name">#iconfuwuqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconoverview"></use>
                </svg>
                <div class="name">概览</div>
                <div class="code-name">#iconoverview</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondashboard"></use>
                </svg>
                <div class="name">电脑</div>
                <div class="code-name">#icondashboard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmianbanbianji"></use>
                </svg>
                <div class="name">面板编辑</div>
                <div class="code-name">#iconmianbanbianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmianbanbianji1"></use>
                </svg>
                <div class="name">面板编辑</div>
                <div class="code-name">#iconmianbanbianji1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfuwuqi1"></use>
                </svg>
                <div class="name">服务器</div>
                <div class="code-name">#iconfuwuqi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsousuo1"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#iconsousuo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconrili2"></use>
                </svg>
                <div class="name">日历</div>
                <div class="code-name">#iconrili2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcomputer"></use>
                </svg>
                <div class="name">电脑</div>
                <div class="code-name">#iconcomputer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfuwuqi2"></use>
                </svg>
                <div class="name">服务器</div>
                <div class="code-name">#iconfuwuqi2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon-test"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#iconicon-test</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfuwuqi3"></use>
                </svg>
                <div class="name">服务器</div>
                <div class="code-name">#iconfuwuqi3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconkaoqinbaobei"></use>
                </svg>
                <div class="name">考勤报备</div>
                <div class="code-name">#iconkaoqinbaobei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcomputer1"></use>
                </svg>
                <div class="name">计算机</div>
                <div class="code-name">#iconcomputer1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyewuyuanyeji-"></use>
                </svg>
                <div class="name">人员</div>
                <div class="code-name">#iconyewuyuanyeji-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshizhong"></use>
                </svg>
                <div class="name">时钟</div>
                <div class="code-name">#iconshizhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmianbankaitong"></use>
                </svg>
                <div class="name">面板开通</div>
                <div class="code-name">#iconmianbankaitong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconGitHub"></use>
                </svg>
                <div class="name">GitHub</div>
                <div class="code-name">#iconGitHub</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon-"></use>
                </svg>
                <div class="name">锁头</div>
                <div class="code-name">#iconicon-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmianban"></use>
                </svg>
                <div class="name">面板</div>
                <div class="code-name">#iconmianban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconrili3"></use>
                </svg>
                <div class="name">日历</div>
                <div class="code-name">#iconrili3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconphone1"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#iconphone1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjiaohuyanshidonghua"></use>
                </svg>
                <div class="name">交互演示动画</div>
                <div class="code-name">#iconjiaohuyanshidonghua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconversion1"></use>
                </svg>
                <div class="name">version</div>
                <div class="code-name">#iconversion1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icongailan"></use>
                </svg>
                <div class="name">概览</div>
                <div class="code-name">#icongailan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsousuo2"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#iconsousuo2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshizhong1"></use>
                </svg>
                <div class="name">时钟</div>
                <div class="code-name">#iconshizhong1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshizhong2"></use>
                </svg>
                <div class="name">时钟</div>
                <div class="code-name">#iconshizhong2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconrenyuan"></use>
                </svg>
                <div class="name">人员</div>
                <div class="code-name">#iconrenyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconversion2"></use>
                </svg>
                <div class="name">version</div>
                <div class="code-name">#iconversion2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshizhong3"></use>
                </svg>
                <div class="name">时钟</div>
                <div class="code-name">#iconshizhong3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshizhong4"></use>
                </svg>
                <div class="name">时钟</div>
                <div class="code-name">#iconshizhong4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfuwuqi4"></use>
                </svg>
                <div class="name">服务器</div>
                <div class="code-name">#iconfuwuqi4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshezhicopy"></use>
                </svg>
                <div class="name">设置 copy 2</div>
                <div class="code-name">#iconshezhicopy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconphone2"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#iconphone2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconrili4"></use>
                </svg>
                <div class="name">日历</div>
                <div class="code-name">#iconrili4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconplus2"></use>
                </svg>
                <div class="name">plus</div>
                <div class="code-name">#iconplus2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icongithub"></use>
                </svg>
                <div class="name">github</div>
                <div class="code-name">#icongithub</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconwendang"></use>
                </svg>
                <div class="name">文档</div>
                <div class="code-name">#iconwendang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconqicheqianlian-1-copy"></use>
                </svg>
                <div class="name">购物车-23</div>
                <div class="code-name">#iconqicheqianlian-1-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconqicheqianlian-1-copy1"></use>
                </svg>
                <div class="name">购物车-23</div>
                <div class="code-name">#iconqicheqianlian-1-copy1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsousuo3"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#iconsousuo3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyanshihuiyi"></use>
                </svg>
                <div class="name">演示汇报</div>
                <div class="code-name">#iconyanshihuiyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconphone3"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#iconphone3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconversion3"></use>
                </svg>
                <div class="name">version</div>
                <div class="code-name">#iconversion3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconversion4"></use>
                </svg>
                <div class="name">version</div>
                <div class="code-name">#iconversion4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconrenyuan1"></use>
                </svg>
                <div class="name">人员 (1)</div>
                <div class="code-name">#iconrenyuan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjishuzhichizhichizhinengzhinengfuwufuwuke"></use>
                </svg>
                <div class="name">服务支持</div>
                <div class="code-name">#iconjishuzhichizhichizhinengzhinengfuwufuwuke</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconrenyuan2"></use>
                </svg>
                <div class="name">人员</div>
                <div class="code-name">#iconrenyuan2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsoushuo"></use>
                </svg>
                <div class="name">搜索--1</div>
                <div class="code-name">#iconsoushuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfuwuqi5"></use>
                </svg>
                <div class="name">服务器</div>
                <div class="code-name">#iconfuwuqi5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconenglish"></use>
                </svg>
                <div class="name">english</div>
                <div class="code-name">#iconenglish</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconiconmanagement-"></use>
                </svg>
                <div class="name">Version Changed</div>
                <div class="code-name">#iconiconmanagement-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsousuo4"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#iconsousuo4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconSUPPORT"></use>
                </svg>
                <div class="name">支持</div>
                <div class="code-name">#iconSUPPORT</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconmianbanbiaoge"></use>
                </svg>
                <div class="name">面板表格</div>
                <div class="code-name">#iconmianbanbiaoge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlog-out"></use>
                </svg>
                <div class="name">log-out</div>
                <div class="code-name">#iconlog-out</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshezhi3"></use>
                </svg>
                <div class="name">设 置</div>
                <div class="code-name">#iconshezhi3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconversion5"></use>
                </svg>
                <div class="name">version</div>
                <div class="code-name">#iconversion5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconrenwu"></use>
                </svg>
                <div class="name">任务 (1)</div>
                <div class="code-name">#iconrenwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshizhong5"></use>
                </svg>
                <div class="name">时钟</div>
                <div class="code-name">#iconshizhong5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshow"></use>
                </svg>
                <div class="name">演示</div>
                <div class="code-name">#iconshow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontags"></use>
                </svg>
                <div class="name">tags</div>
                <div class="code-name">#icontags</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_horn"></use>
                </svg>
                <div class="name">icon_horn</div>
                <div class="code-name">#iconicon_horn</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_dmail"></use>
                </svg>
                <div class="name">icon_dmail</div>
                <div class="code-name">#iconicon_dmail</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_message"></use>
                </svg>
                <div class="name">icon_message</div>
                <div class="code-name">#iconicon_message</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_im_more"></use>
                </svg>
                <div class="name">icon_im_more</div>
                <div class="code-name">#iconicon_im_more</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_subordinate"></use>
                </svg>
                <div class="name">icon_subordinate</div>
                <div class="code-name">#iconicon_subordinate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconField-number"></use>
                </svg>
                <div class="name">Field-number</div>
                <div class="code-name">#iconField-number</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondelete"></use>
                </svg>
                <div class="name">delete</div>
                <div class="code-name">#icondelete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_English"></use>
                </svg>
                <div class="name">icon_English</div>
                <div class="code-name">#iconicon_English</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontips"></use>
                </svg>
                <div class="name">tips</div>
                <div class="code-name">#icontips</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsegi-icon-tips"></use>
                </svg>
                <div class="name">segi-icon-tips</div>
                <div class="code-name">#iconsegi-icon-tips</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontips1"></use>
                </svg>
                <div class="name">tips (1)</div>
                <div class="code-name">#icontips1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconTIPS"></use>
                </svg>
                <div class="name">TIPS (2)</div>
                <div class="code-name">#iconTIPS</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconexchange"></use>
                </svg>
                <div class="name">exchange</div>
                <div class="code-name">#iconexchange</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconexchange1"></use>
                </svg>
                <div class="name">exchange (1)</div>
                <div class="code-name">#iconexchange1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconexchange2"></use>
                </svg>
                <div class="name">exchange (2)</div>
                <div class="code-name">#iconexchange2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconexchange-cny-line"></use>
                </svg>
                <div class="name">exchange-cny-line</div>
                <div class="code-name">#iconexchange-cny-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconexcel"></use>
                </svg>
                <div class="name">excel</div>
                <div class="code-name">#iconexcel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconExcelbangongruanjianbiaoge"></use>
                </svg>
                <div class="name">Excel 办公软件 表格</div>
                <div class="code-name">#iconExcelbangongruanjianbiaoge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconword"></use>
                </svg>
                <div class="name">word</div>
                <div class="code-name">#iconword</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconword1"></use>
                </svg>
                <div class="name">word (1)</div>
                <div class="code-name">#iconword1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontubiao-biaoge"></use>
                </svg>
                <div class="name">图表-表格</div>
                <div class="code-name">#icontubiao-biaoge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontubiaoxiajiangqushi"></use>
                </svg>
                <div class="name">图表 下降趋势</div>
                <div class="code-name">#icontubiaoxiajiangqushi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontubiaoduoweizhuzhuangtu"></use>
                </svg>
                <div class="name">图表 多维柱状图</div>
                <div class="code-name">#icontubiaoduoweizhuzhuangtu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontubiao"></use>
                </svg>
                <div class="name">图表 (1)</div>
                <div class="code-name">#icontubiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontubiao1"></use>
                </svg>
                <div class="name">图表 (2)</div>
                <div class="code-name">#icontubiao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontubiaozoushitu"></use>
                </svg>
                <div class="name">图表 走势图</div>
                <div class="code-name">#icontubiaozoushitu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontubiao-hanshu"></use>
                </svg>
                <div class="name">图表-函数</div>
                <div class="code-name">#icontubiao-hanshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzuzhi"></use>
                </svg>
                <div class="name">组织</div>
                <div class="code-name">#iconzuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzuzhiguanli"></use>
                </svg>
                <div class="name">组织管理</div>
                <div class="code-name">#iconzuzhiguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzuzhiqunti"></use>
                </svg>
                <div class="name">组织群体</div>
                <div class="code-name">#iconzuzhiqunti</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzhichizhongxin"></use>
                </svg>
                <div class="name">支持中心</div>
                <div class="code-name">#iconzhichizhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconICPbeianfuwu"></use>
                </svg>
                <div class="name">ICP备案服务</div>
                <div class="code-name">#iconICPbeianfuwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconversion6"></use>
                </svg>
                <div class="name">version</div>
                <div class="code-name">#iconversion6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconversion7"></use>
                </svg>
                <div class="name">version</div>
                <div class="code-name">#iconversion7</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconversionicon"></use>
                </svg>
                <div class="name">version icon</div>
                <div class="code-name">#iconversionicon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconlogout-"></use>
                </svg>
                <div class="name">logout-1</div>
                <div class="code-name">#iconlogout-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconks-namespace"></use>
                </svg>
                <div class="name">k8s-namespace</div>
                <div class="code-name">#iconks-namespace</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
